<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-2">
        <div class="sticky" :style="'top: ' + topVal">
          <q-card flat class="">
            <q-item
              clickable
              :to="item.to"
              v-for="item in itemList"
              :key="item.to"
              @click="() => {}"
            >
              <q-item-section avatar>
                <q-icon :name="item.icon" />
              </q-item-section>
              <q-item-section>
                <q-item-label>{{ item.text }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-card>
        </div>
      </div>
      <div class="col">
        <div class="q-px-sm">
          <q-card flat>
            <q-tab-panels v-model="tab" vertical keep-alive animated>
              <q-tab-panel name="readArticle" class="q-pa-none">
                <ReadArticle></ReadArticle>
              </q-tab-panel>
              <q-tab-panel name="favArticle" class="q-pa-none">
                <FavArticle></FavArticle>
              </q-tab-panel>
              <q-tab-panel name="readUser" class="q-pa-none">
                <ReadUser></ReadUser>
              </q-tab-panel>
              <q-tab-panel name="readTag" class="q-pa-none">
                <ReadTag></ReadTag>
              </q-tab-panel>
              <q-tab-panel name="readTopic" class="q-pa-none">
                <ReadTopic></ReadTopic>
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </div>
      </div>
      <div class="col-3">
        <div class="sticky" :style="'top: ' + topVal">
          <div><HotTagCard></HotTagCard></div>
        </div>
      </div>
    </div>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import SuspensionBtn from 'src/components/SuspensionBtn.vue';
import ReadArticle from './ReadArticle.vue';
import FavArticle from './FavArticle.vue';
import ReadUser from './ReadUser.vue';
import ReadTag from './ReadTag.vue';
import ReadTopic from './ReadTopic.vue';
import HotTagCard from 'src/components/HotTagCard.vue';
import { useWebStore } from 'src/stores/webStore';
import { onMounted, ref, watch } from 'vue';

const { topVal } = storeToRefs(useWebStore());

const props = defineProps<{
  type: string;
}>();

const tab = ref('');

watch(
  () => props.type,
  (type) => {
    tab.value = type;
  },
);

onMounted(() => {
  tab.value = props.type;
});

const itemList = [
  {
    to: '/ranking/readArticle',
    icon: 'data_exploration',
    text: '文章阅读榜',
  },
  {
    to: '/ranking/favArticle',
    icon: 'insights',
    text: '文章收藏榜',
  },
  {
    to: '/ranking/readUser',
    icon: 'diversity_3',
    text: '作者热度榜',
  },
  {
    to: '/ranking/readTag',
    icon: 'loyalty',
    text: '标签热度榜',
  },
  {
    to: '/ranking/readTopic',
    icon: 'hub',
    text: '话题热度榜',
  },
];
</script>

<style scoped></style>
